<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="Pikeropen.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Piker Open Leaderboard</title>
    <script type="text/javascript" lang="javascript">
    /*STATES*/
    var selectGroup = 1, playingHole = 2, scoreHole = 3, course = 4, playerRoundView = 5;
    var viewState = selectGroup;
    var golfersData = null;
    
    function buildGolferList (golfersToList) {
   		list = document.getElementById('PlayerList');
   		html = '';
   		for (i = 0; i < golfersToList.length;i++) {
   			selectedText = '' + golfersToList[i].mHighlighted + "'";
   			if (viewState == selectGroup) {
	   			if (golfersToList[i].mHighlighted) {
	   				selectedText += " onclick=\"return unhighlight";
	   			} else {
	   				selectedText += " onclick=\"return highlight";
	   			}
   			} else {
   				selectedText += " onclick=\"return playerRoundFromAnchor";
   			}
   			parText = golfersToList[i].mScoreDisplay
   			var classString;
   			if (viewState == selectGroup)
   				classString = "thisIsntUsed";
   			else
   				classString = "arrow";
   			
   			html += "<li class=\"" + classString + "\"><a listIndex='" + i + "' href=\"javascript:;\" state='" + selectedText + "(this);\">" + golfersToList[i].mName + " at " + parText + " through " + golfersToList[i].mHole + " holes." + "</a></li>";
   		}
   		list.innerHTML = html;
   		lockPlayerList();
   	}
    
    var revisedScorePlayer = null;
    var revisedScoreHole = null;
    var revisedScoreSelectedGolfer = null;
    function playerRoundFromAnchor (anchor) {
    	viewState = playerRoundView;
    	selectedGolfer = golfersData.mGolfers[anchor.getAttribute("listIndex")];
    	revisedScoreSelectedGolfer = selectedGolfer;
    	playerRoundWithGolfer (selectedGolfer);
    }
    
    function playerRoundWithGolfer (selectedGolfer) {
    	viewState = playerRoundView;
    	document.getElementById('save').innerHTML = "";
		document.getElementById('save').onclick = function(){};
		document.getElementById('backButton').innerHTML = "Back";
		document.getElementById('backButton').onclick = function(){refreshPlayingHole();};
    	revisedScorePlayer = selectedGolfer.mName;
    	list = document.getElementById('PlayerList');
    	subtitleBar = document.getElementById('subtitle');
    	/* subtitleBar.innerHTML = selectedGolfer.mName + " on TimberRidge GC"; */
    	document.getElementById('ListHeader').innerHTML = selectedGolfer.mName + " - Score Card";
    	var classString;
    	var onClickFunction;
    	if (selectedGolfer.mHighlighted) {
    		classString = "arrow";
    		onClickFunction = "return transformListToReviseScore(this);";
    	} else {
    		classString = "thisIsntUsed";
    		onClickFunction = '';
    	}
   		var html = '';/*  = "<li class=\"arrow1\"><a href=\"javascript:;\">" + selectedGolfer.mName + " on TimberRidge GC</a></li>"; */
   		
   		for (i = 0; i < selectedGolfer.mScoredHoles.length;i++) {
   			html += "<li class=\"" + classString + "\"><a listIndex='" + i + "' href=\"javascript:;\" onclick=\"" + onClickFunction + "\"> Hole #" + (i+1) + " -> " + selectedGolfer.mScoredHoles[i] + " shots </a></li>";
   		}
   		list.innerHTML = html;
    }
    
    function transformListToReviseScore (anchor) {
    	document.getElementById('save').innerHTML = "";
		document.getElementById('save').onclick = function(){};
		document.getElementById('backButton').innerHTML = "Back";
		document.getElementById('backButton').onclick = function(){playerRoundWithGolfer(revisedScoreSelectedGolfer)};
    	revisedScoreHole = parseInt(anchor.getAttribute("listIndex")) + 1;
    	list = document.getElementById('PlayerList');
    	document.getElementById('ListHeader').innerHTML = "Revising Hole " + revisedScoreHole;
   		html = '';/*"<li class=\"arrow1\"><a href=\"javascript:;\">" + names[index] + "</a></li>"; */
   		for (i = 1; i < 13;i++) {
   			html += "<li class=\"arrow1\"><a href=\"javascript:;\" onclick=\"return reviseScore(this);\">" + i + "</a></li>";
   		}
   		list.innerHTML = html;
    }
    
    function reviseScore (anchor) {
    	score = anchor.innerHTML;
    	playerText = "player=" + revisedScorePlayer + "&hole=" + revisedScoreHole + "&score=" + score;
    	url = '/pikeropen/greet/reviseScore.html?' + playerText;
    	jx.load(url,function(data){
    		refreshPlayingHole ();
		});
    }
    
    function lockPlayerList () {
    	list = document.getElementById('PlayerList');
    	var lis = list.getElementsByTagName('a');
    	playerText = '';
    	for (var i=0;i<lis.length;i++) {
    		if (golfersData.mGolfers[i].mHighlighted==true) {
  				lis[i].parentNode.style.backgroundColor = 'lightblue';
    		}
    	}
    }
    
    currentHole = 0;
    
    function save() {
    	actionText = document.getElementById('save').innerHTML;
    	document.getElementById('save').innerHTML = "Wait...";
    	document.getElementById('save').onclick = function(){};
    	if (viewState == selectGroup) {
	    	list = document.getElementById('PlayerList');
	    	var lis = list.getElementsByTagName('a');
	    	playerText = '';
	    	for (var i=0;i<lis.length;i++) {
	    		if (lis[i].state=='true') {
	    			playerText += 'player=' + golfersData.mGolfers[i].mName + '&';
	  				lis[i].parentNode.style.backgroundColor = 'lightblue';
	    		}
	    	}
	    	
	    	url = '/pikeropen/greet/hello.html?' + playerText;
	    	jx.load(url,function(data){
	    		viewState = playingHole;
				jsonthing = eval( "(" + data + ")" );
				golfersData = jsonthing;
	    		document.getElementById('save').innerHTML = "Score";
	    		document.getElementById('save').onclick = function(){save()};
	    		document.getElementById('backButton').innerHTML = "Refresh";
	    		document.getElementById('backButton').onclick = function(){refreshPlayingHole()};
	    		currentHole = golfersData.mHoleNumber + 1;
    			document.getElementById('ListHeader').innerHTML = 'Playing ' + createHoleDisplayString (golfersData, currentHole-1);
	    		buildGolferList (golfersData.mGolfers);
			});
    	} else if (viewState == playingHole || viewState == scoreHole) {
	    	viewState = scoreHole;
    		document.getElementById('save').innerHTML = '';
    		document.getElementById('save').onclick = function(){};
    		document.getElementById('backButton').innerHTML = 'Cancel';
	    	document.getElementById('ListHeader').innerHTML = "Finished Hole " + currentHole;
	    	playersToScore = findListOfPlayersToScore()
	    	scores = new Array ();
    		transformListToScores(playersToScore, 0, scores);
    	} else {
    		
    	}
		return false;
	}
    
    function findListOfPlayersToScore () {
    	players = new Array ();
    	for (i = 0; i < golfersData.mGolfers.length;i++) {
    		if (golfersData.mGolfers[i].mHighlighted) {
    			players.push(golfersData.mGolfers[i].mName);
    		}
    	}
    	return players;
    }
    
    var selectedCount = 0;
    function highlight(anchor) {
    	if (document.getElementById('save').innerHTML == 'Play') {
			if (selectedCount < 4){
				anchor.parentNode.style.backgroundColor = 'yellow';
				anchor.onclick=function(){unhighlight(this)};
				selectedCount++;
				anchor.state='true';
			}
    	}
	}
    
    currentNames = null;
    currentIndex = -1;
    currentScores = null;
    
    function transformListToScores (names, index, scores) {
    	if (index >= names.length) {
    		//save scores
    		playerScores = '';
    		for (var i=0;i<names.length;i++) {
	  			playerScores += names[i] + '=' + scores[i] + '&';
	    	}
    		url = '/pikeropen/greet/score.html?' + playerScores;
	    	jx.load(url,function(data){
	    		viewState = playingHole;
				jsonthing = eval( "(" + data + ")" );
				golfersData = jsonthing;
	    		document.getElementById('save').innerHTML = "Score";
	    		document.getElementById('save').onclick = function(){save()};
	    		document.getElementById('backButton').innerHTML = "Refresh";
	    		document.getElementById('backButton').onclick = function(){refreshPlayingHole();};
	    		currentHole = golfersData.mHoleNumber + 1;
    			document.getElementById('ListHeader').innerHTML = 'Playing ' + createHoleDisplayString (golfersData, currentHole-1);
	    		buildGolferList (golfersData.mGolfers);
	    	});
    		transformListToLeaderboard();
    	} else {
	    	currentNames = names;
	    	currentIndex = index;
	    	currentScores = scores;
	    	list = document.getElementById('PlayerList');
	   		html = "<li class=\"arrow1\"><a href=\"javascript:;\">" + names[index] + "</a></li>";
	   		for (i = 1; i < 13;i++) {
	   			html += "<li class=\"arrow1\"><a href=\"javascript:;\" onclick=\"return enterScore(this);\">" + i + "</a></li>";
	   		}
	   		list.innerHTML = html;
    	}
    }
    
    function createHoleDisplayString (courseUpdate, currentHole) {
    	roundNum = Math.floor(1 + (currentHole/18));
    	display = 'Round ' + roundNum + ' Hole ' + (1+(currentHole%18)) + ", Par " + courseUpdate.mHole.mPar + " " + courseUpdate.mHole.mYardage + " yards";
    	return display;
    }
    
    function enterScore (number) {
    	score = number.innerHTML;
    	currentScores.push(score);
    	transformListToScores (currentNames, currentIndex+1, currentScores);
    }
    
    function transformListToLeaderboard () {
    	buildGolferList (golfersData.mGolfers);
    }
    
    function unhighlight(anchor) {
    	if (document.getElementById('save').innerHTML == 'Play') {
			anchor.parentNode.style.backgroundColor = 'white';
			anchor.onclick=function() {highlight(this)};
			selectedCount--;
			anchor.state = 'false';
    	}
	}
    
    function refresh() {
    	playerText = '';
    	if (golfersData != null && golfersData.mGolfers != null) {
	    	playersToScore = findListOfPlayersToScore();
	    	for (var i=0;i<playersToScore.length;i++) {
	    		playerText += 'player=' + playersToScore[i] + '&';
	    	}
    	}
    	url = '/pikeropen/greet/hello.html?' + playerText;
    	jx.load(url,function(data){
			jsonthing = eval( "(" + data + ")" );
    		golfersData = jsonthing;
    		buildGolferList (golfersData.mGolfers);
		});
	}
    
    function refreshPlayingHole () {
    	viewState = playingHole;
    	refresh ();
    	document.getElementById('backButton').innerHTML = "Refresh";
    	document.getElementById('backButton').onclick = function(){refreshPlayingHole();};
    	document.getElementById('save').innerHTML = "Score";
    	document.getElementById('save').onclick = function(){save()};
    	document.getElementById('ListHeader').innerHTML = 'Playing ' + createHoleDisplayString (golfersData, currentHole-1);
    }
    
    function refreshSelectGroup () {
    	viewState = selectGroup;
    	refresh ();
    }
    
    function initialBuild () {
    	refreshSelectGroup ();
    	/* setInterval ("refresh()", 30000); */
    }
 
	</script> 
	
	<script src="http://pic.classistatic.com/image/site/ca/mobile/r4/main.js"></script> 
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <!--<script type="text/javascript" language="javascript" src="pikeropen/pikeropen.nocache.js"></script> -->
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body id='normal', onload="initialBuild()">

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
    <div id='header'><h1>Piker Open '11</h1><a href="javascript:;" id="backButton" onclick="return refreshSelectGroup();"'>Refresh</a><a href="javascript:;" onclick="return save();" id="save">Play</a></div>
	<ul><li class='arrow'><div style="margin-right: 10px"> <a id='subtitle' href="javascript:;">TimberRidge GC</a> 
	</div></li></ul>
<h4 id='ListHeader' style='text-overflow:ellipsis; overflow: hidden; white-space: nowrap;'>Select Your Group:</h4>
<ul id='PlayerList'> 
</ul>
  </body>
</html>
